<script setup>
  // This starter template is using Vue 3 <script setup> SFCs
  // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
  // import HelloWorld from '../components/HelloWorld.vue'
  import dayjs from "dayjs";
  let day = dayjs().format('YYYY-MM-DD hh:mm');
  import { computed, ref } from 'vue'
  import { useStore } from "vuex";
  
  const active = ref(0);
  const store = useStore();
  
  const name = computed(() => store.state.example.name);
  
  const images = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    ];
  console.log('index setup store.state.name',store.state.name , store.state.example.name)
  
  
  </script>
  <script>
  // import eventBus from '@/utils/eventBus'
  import eventBus from 'vue3-eventbus'
  
  export default {
    name:'Index',  
    methods: {
      
    },
    async created() {
      // let data = await this.$axios.get('api/testMock').then(r=>r.data); 
      let data = await this.$axios.post('/api/createUser').then(r=>r.data); 
      
      
      console.log('index created:' , this.$api , data , {name:this.name} )
    }, 
    async mounted() {
      
      this.$eventBus.on('testEvt',data=>{
        console.log('index mounted eventBus on:' ,data )
      })
      console.log('index mounted')
      setTimeout(()=>{
        console.log('index mounted setTimeout: emit eventBus testEvt'  )
        eventBus.emit('testEvt',123);
      },2)
      console.log('index mounted:' , await this.$api.testApi(20) , this.name )
    },
  }
  </script>
  
  <template>
      
    
    <div class="page_index">
        <van-notice-bar
          left-icon="volume-o"
          text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
        />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>1</van-swipe-item>
          <van-swipe-item>2</van-swipe-item>
          <van-swipe-item>3</van-swipe-item>
          <van-swipe-item>4</van-swipe-item>
        </van-swipe>
        <van-row class="iconbtns">
          <van-col span="6"><van-icon class="q-py-sm" size="32" name="send-gift-o" /><span>按钮</span></van-col>
          <van-col span="6"><van-icon class="q-py-sm" size="32" name="todo-list-o" /><span>按钮</span></van-col>
          <van-col span="6"><van-icon class="q-py-sm" size="32" name="music-o" /><span>按钮</span></van-col>
          <van-col span="6"><van-icon class="q-py-sm" size="32" name="records" /><span>按钮</span></van-col>
        </van-row>
        <div class="c-list">
          <van-card
            desc="描述信息"
            title="贷款产品标题"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
          />
          <van-card
            num="2"
            price="2.00"
            desc="描述信息"
            title="贷款产品标题"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
          />
          <van-card
            num="2"
            price="2.00"
            desc="描述信息"
            title="贷款产品标题"
            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
          >
            <template #tags>
              <van-tag plain type="danger">标签</van-tag>
              <van-tag plain type="danger">标签</van-tag>
            </template>
          </van-card>
        </div>
        <div>
          <span>hello</span>
        </div>
  
  
    </div>
  </template>
  
  
  <style lang="scss">
  .page_index{
      color: #ff0000;
  }
  
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
    }
  
  .iconbtns .van-col {
      display: inline-block;
      float: none;
      text-align: center;
      vertical-align: middle;
      cursor: pointer;
      span {
        display: block;
        margin: -4px 0 4px;
        padding: 0 5px;
        color: var(--van-text-color);
        font-size: 12px;
        // height: 36px;
        // line-height: 18px;
    }
  }
  .c-list > div > div{ text-align: left }
  
  </style>
  